<template>
	<view style="background-color: #F5F5F5;height: 100vh;">
		<view class="header" :style="'padding-top: '+bartop+'px; padding-bottom:10rpx'">
			<view class="goodsmsgheader headertop" style="width: 100%;">
			      <navigator open-type="navigateBack" style="padding:10rpx">
			        <image src="https://x.bilinmeiju.com/static/myfangchan/zjt.png" mode="aspectFit"></image>
			      </navigator>
			      <text>添加成员</text>
			      <!-- <image src="/static/goodsmsghei.png" mode="aspectFit" bindtap="showmsg" wx:if="{{cartlen=='00'?false:true}}"><text>{{cartlen}}</text></image> -->
			  </view>
		</view>
		<view class="box topnext">
			<view class="box-1">
				<view class="box-1text">
					所属户室
				</view>
				<view class="box-2">
					<picker @change="bindPickerChange1" range-key="roomname" :range="roomlist">
						<view class="uni-input">{{roomname}}</view>
					</picker>
				</view>
				<image class="box-1-img" src="https://x.bilinmeiju.com/static/mychengyuan/xfanhui.png" mode=""></image>
			</view>
			<view class="xianmax">
				<image class="xian" src="https://x.bilinmeiju.com/static/mychengyuan/fenge.png" mode=""></image>
			</view>
			<view class="box-1">
				<view class="box-1text">
					姓名
				</view>
				<view class="">
					<input type="tel" v-model="adddata.name" placeholder="点击填写姓名">
				</view>
			</view>
			<view class="xianmax">
				<image class="xian" src="https://x.bilinmeiju.com/static/mychengyuan/fenge.png" mode=""></image>
			</view>
			
			<view class="box-1">
				<view class="box-1text">
					手机号码
				</view>
				<view class="">
					<input type="text" v-model="adddata.phone" placeholder="点击填写手机号码">
				</view>
			</view>
			<view class="xianmax">
				<image class="xian" src="https://x.bilinmeiju.com/static/mychengyuan/fenge.png" mode=""></image>
			</view>
			
			
			<view class="box-1">
				<view class="box-1text">
					身份类型
				</view>
				<view class="box-2">
					<picker @change="bindPickerChange2" :value="index2" :range="array2">
						<view class="uni-input">{{shenfen}}</view>
					</picker>
				</view>
				<image class="box-1-img" src="https://x.bilinmeiju.com/static/mychengyuan/xfanhui.png" mode=""></image>
			</view>
			<view class="xianmax">
				<image class="xian" src="https://x.bilinmeiju.com/static/mychengyuan/fenge.png" mode=""></image>
			</view>
			<view class="box-1">
				<view class="box-1text">
					入住日期
				</view>
				<view class="box-2">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
				<image class="box-1-img" src="https://x.bilinmeiju.com/static/mychengyuan/xfanhui.png" mode=""></image>
			</view>
			<view class="xianmax">
				<image class="xian" src="https://x.bilinmeiju.com/static/mychengyuan/fenge.png" mode=""></image>
			</view>
			
			<view class="box-1" v-if="adddata.shenfen==2">
				<view class="box-1text">
					有效期至
				</view>
				<view class="box-2">
					<picker mode="date" :value="date2" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date2}}</view>
					</picker>
				</view>
				<image class="box-1-img" src="https://x.bilinmeiju.com/static/mychengyuan/xfanhui.png" mode=""></image>
			</view>
			<view class="xianmax" v-if="adddata.shenfen==2">
				<image class="xian" src="https://x.bilinmeiju.com/static/mychengyuan/fenge.png" mode=""></image>
			</view>

		</view>
		<view class="box" @click="renlian" v-if="!vering">
			<view class="box-1">
				<view class="box-1text">
					人脸录入
				</view>
				<view class="box-2">
					{{adddata.face?'已录入':'请录入'}}
				</view>
				<image class="box-1-img" src="https://x.bilinmeiju.com/static/mychengyuan/xfanhui.png" mode=""></image>
			</view>
		</view>
		<view class="box">
			<view class="box-1">
				<view class="box-1text">
					证件类型
				</view>
				<view class="box-2">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{cardtype}}</view>
					</picker>
				</view>
				<image class="box-1-img" src="https://x.bilinmeiju.com/static/mychengyuan/xfanhui.png" mode=""></image>
			</view>
			<view class="xianmax">
				<image class="xian" src="https://x.bilinmeiju.com/static/mychengyuan/fenge.png" mode=""></image>
			</view>
			<view class="box-1">
				<view class="box-1text">
					证件号码
				</view>
				<view class="">
					<input type="idcard" v-model="adddata.cardnumber" placeholder="点击填写证件号码">
				</view>
			</view>
			<view class="xianmax">
				<image class="xian" src="https://x.bilinmeiju.com/static/mychengyuan/fenge.png" mode=""></image>
			</view>
		</view>



		<view class="bottom" @click="add">
			确认提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			const currentDate2 = this.getDate({
				format: true
			},'next')
			
			return {
				CustomBar: 0,
				topheight: 0,
				array: [ '身份证','护照', '其他'],
				array1: ['102', '103', '104'],
				array2: ['租客', '亲属'],
				index: 0,
				index1: 0,
				index2: 0,
				top:0,
				date: currentDate,
				date2: currentDate2,
				roomId:'',
				roomlist:[],
				adddata:{
					roomId:'',
					name:'',
					phone:'',
					shenfen:'',
					face:'',
					cardtype:1,
					cardnumber:'',
					type:2
				},
				roomname:'',
				shenfen:'请选择用户身份',
				cardtype:'身份证',
				bartop:0,
				vering:1
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(e) {
			this.bartop = this.$bartop;
			this.roomId = e.roomid;
			var vering = uni.getStorageSync('vering');
			if(vering || vering===0) this.vering = vering;
			this.$post('center/roominfo',{roomId:this.roomId}).then(res=>{
				this.roomname = res.data.roomname;
				if(!this.roomId) this.roomId = res.data.roomId;
				this.roomlist = res.data.roomlist;
				if(this.roomlist.length==0){
					var box = {
						isshow:true,
						title:'请绑定房产',
						content:'请先进行房产绑定',
						content2:'然后进行数据录入',
						btntitle:'去绑定',
						path:'/pages/fangchanbangding/fangchanbangding',
						type:2
					}
					this.$refs.box.open(box)
				}
			})
		},
		onShow() {
			var face = uni.getStorageSync('face');
			if(face) {
				this.face = face
				uni.setStorageSync('face','');
			}
			
		},
		methods: {
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
			renlian(){
				uni.navigateTo({
					url:'/pages/checkface/checkface'
				})
			},
			add() {
				var adddata = this.adddata;
				adddata['roomId'] = this.roomId;
				adddata['starttime'] = this.date;
				adddata['endtime'] = this.date2;
				adddata['roomname'] = this.roomname;
				adddata['face'] = this.face;
				console.log(adddata);
				this.$post('center/adduser',adddata).then(res=>{
					if(res.code===0){
						uni.showModal({
							title:'创建提示',
							content:res.msg,
							success() {
								uni.navigateBack()
							}
						})
					}
				})
			},
			bindPickerChange(e) {
				
				var index = e.detail.value
				this.cardtype = this.array[index]
				this.adddata.cardtype = index*1+1
			},
			bindPickerChange1(e) {
				var index = e.detail.value
				this.roomname = this.roomlist[index].roomname;
				this.roomId = this.roomlist[index].roomId;
			},
			bindPickerChange2(e) {
				var index1 = e.detail.value;
				this.shenfen = this.array2[index1];
				this.adddata.shenfen = index1*1+2;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			getDate(type,next) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}else if(next){
					year = year+1;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	.beijing {
		width: 100vw;
		height: 174rpx;
		z-index: 1;
		position: absolute;
		top: 0;
	}

	.top {
		z-index: 5;
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		/* align-items: flex-end; */
	}

	.toptext {
		z-index: 5;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
		line-height: 36rpx;
	}

	.top1img {
		z-index: 5;
		width: 20rpx;
		height: 36rpx;
	}

	.box {
		width: 700rpx;
		margin: 0 auto;
		margin-top: 25rpx;
		background-color: white;
	}

	.box-1 {
		display: flex;
		align-items: center;
		height: 100rpx;
	}

	.box-1text {
		margin-left: 35rpx;
		width: 180rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
	}

	.box-1-img {
		width: 9rpx;
		height: 17rpx;
	}

	.box-2 {
		width: 420rpx;
		font-size: 29rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.xianmax {
		display: flex;
		justify-content: center;
	}

	.xian {
		width: 641rpx;
		height: 2rpx;
		margin: 0 auto;
	}




	.bottom {
		font-size: 40rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		line-height: 100rpx;
		text-align: center;
		position: fixed;
		bottom: 30rpx;
		color: #FFFFFF;
		width: 700rpx;
		height: 100rpx;
		margin-left: 25rpx;
		background-color: rgb(255, 174, 69);
		border-radius: 50rpx;
	}
</style>
